<template>
  <div class="container">
    <div class="left-container">
      <div class="search">
        <el-input
          v-model="input"
          class="w-50 m-2"
          placeholder="Please Input"
          :prefix-icon="Search"
        />
      </div>

      <div class="device-list">
        <el-collapse v-model="activeName" accordion class="el-collapse-item">
          <el-collapse-item class="el-collapse-item" title="xxx报警设备" name="1">
            <div v-for="(item, index) in deviceList" :key="index" class="device-item">
              <el-button text @click="handleClick(item)">{{ item.desc }}</el-button>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
    <div class="right-container">
      <div class="tool-box">
        <v3-drag-zoom-container
          ref="zoomContainer"
          style="width: 1000px; height: 100%; background-color: #f5f5f5"
          :followPointer="false"
          :minZoom="0.5"
          :maxZoom="2"
          :zoomFactor="0.1"
          :draggable="false"
          :autoResize="true"
        >
          <img
            class="demo-img"
            :src="`/static/demo${currentImg}.jpg`"
            alt="Demo"
            style="width: 100%"
          />
          <div>
            <v3-drag-zoom-item
              v-for="(point, index) in points"
              :key="point.label"
              :position="point.position"
              :draggable="true"
              @onMoveFinished="onMoveFinished"
            >
              <div>
                <div>
                  <img style="width: 40px; height: 40px" src="/static/location.png" alt="" />
                </div>
                报警器 - {{ index + 1 }}
              </div>
            </v3-drag-zoom-item>
          </div>
          <!-- <div
            v-for="(item, index) in locations"
            :key="index"
            class="location-item"
            :style="{
              left: `${item.x}px`,
              top: `${item.y}px`,
              cursor: item.draggable ? 'grab' : 'default'
            }"
            @mousedown="startDrag(item, $event)"
            @mousemove="onDrag(item, $event)"
            @mouseup="endDrag(item, $event)"
            @dblclick="fixLocation(item)"
          >
            <img
              class="location-img"
              :src="item.src"
              alt="Location"
              style="width: 50px; height: 50px"
            />
            <div>{{ index + 1 }}号报警器</div>
          </div> -->
        </v3-drag-zoom-container>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'

const input = ref('')
const currentImg = ref(1)
const zoomContainer = ref(null)
const deviceList = ref([
  { desc: '1号报警设备', id: 1 },
  { desc: '2号报警设备', id: 2 }
])
const points = ref([
  { label: 1, position: { x: 29.6, y: 57 } },
  { label: 2, position: { x: 64.6, y: 31 } }
])
const locations = ref([
  {
    src: '../../public/static/location.png',
    x: 234,
    y: 401,
    draggable: true
  },
  {
    src: '../../public/static/location.png',
    x: 579,
    y: 200,
    draggable: true
  }
])
const handleClick = (data) => {
  currentImg.value = data.id
  if (currentImg.value === 2) {
    locations.value = [{ src: '../../public/static/location.png', x: 362, y: 332, draggable: true }]
  }
  if (currentImg.value === 1) {
    locations.value = [
      {
        src: '../../public/static/location.png',
        x: 234,
        y: 401,
        draggable: true
      },
      {
        src: '../../public/static/location.png',
        x: 579,
        y: 200,
        draggable: true
      }
    ]
  }
}
const onMoveFinished = (e) => {
  console.log(e)
}
// 开始拖动
const startDrag = (item, event) => {
  if (!item.draggable) return // 如果不可拖动，直接返回
  item.isDragging = true
  item.offsetX = event.clientX - item.x
  item.offsetY = event.clientY - item.y
  console.log('startDrag')
}

// 正在拖动
const onDrag = (item, event) => {
  if (!item.isDragging) return
  item.x = event.clientX - item.offsetX
  item.y = event.clientY - item.offsetY
  console.log('onDrag')
}

// 结束拖动
const endDrag = (item, event) => {
  if (!item.isDragging) return
  item.isDragging = false
  console.log(item.x, item.y)
  locations.value.forEach((location) => {
    if (location !== item) {
      if (Math.abs(location.x - item.x) < 50 && Math.abs(location.y - item.y) < 50) {
        location.x = item.x
        location.y = item.y
      }
    }
  })
  console.log('endDrag')
}
</script>

<style lang="scss" scoped>
.v3-drag-zoom-item {
  z-index: 10;
}
.container {
  padding: 20px;
  display: flex;
  .left-container {
    width: 200px;

    .device-list {
      margin-top: 20px;
      //   padding: 20px;
      height: calc(100vh - 100px);
      background-color: #fff;

      .device-item {
        text-align: center;
      }
    }
  }

  .right-container {
    width: calc(100% - 200px);
    height: 100%;

    .tool-box {
      height: 100%;
      position: relative;
      .demo-img {
        width: 1000px;
        height: 800px;
      }
      .demo-img {
        width: 100%;
        height: auto;
      }

      .location-item {
        position: absolute;
      }

      .location-img {
        width: 50px;
        height: 50px;
      }
    }
  }
}
.draggable-content {
  cursor: pointer;
  img {
    width: 100px;
    height: 100px;
  }
}

.dropped-content {
  position: absolute;
  transform-origin: top left;
  user-select: none;
  // pointer-events: none; /* 防止干扰缩放操作 */
  img {
    width: 100px;
    height: 100px;
  }
}
.drag-zoom {
  position: relative;
  margin: 100px auto;
  background-color: lightblue;
  overflow: hidden;
  .drag-zoom-content {
    width: 150px;
    height: 150px;
    background: #ff000099;
  }
}
</style>
